<template>
  <div id="messageList">
    <h1 class="con-right-title">
      消息清单
    </h1>
    <div class="bottom-box"></div>
    <!-- table -->
    <div class="table">
      <!-- 上部搜索条件 -->
      <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
      <div class="table-conBtn">
        <freshCom @searchList="searchList"></freshCom>
      </div>
      <!-- 表格部分 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        @selection-change="selectChange"
        max-height="490"
        ref="table"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          :selectable="selectAble"
        ></el-table-column>
        <el-table-column type="index" width="60" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="通知编号(ID)"
          width="220"
        ></el-table-column>
        <el-table-column prop="touchType" label="触达渠道">
          <template slot-scope="scope">
            <span
              v-if="scope.row.touchType"
              class="tag-span"
              :class="scope.row.touchType | filterClass('touchType')"
              >{{ scope.row.touchType | filterName('touchType') }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="160">
          <template slot-scope="scope">
            <div v-if="scope.row.title">
              {{ scope.row.title }}
            </div>
            <div v-else>
              -
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="source.type" label="发布类别" width="140">
          <template slot-scope="scope">
            <span
              v-if="scope.row.source && scope.row.source.type"
              class="tag-span"
              :class="scope.row.source.type | filterClass('pubType')"
              >{{ scope.row.source.type | filterName('pubType') }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="content"
          label="所属内容"
          width="200"
        >
          <template slot-scope="scope">
            <!--图片-->
            <span v-if="scope.row.touchType === 'BOMB_SCREEN'">
              <listImgString :imgInfo="scope.row.img"></listImgString>
            </span>
            <!--文字-->
            <span v-else>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdDate" label="创建时间" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.createdDate">{{
              scope.row.createdDate | timeToTime()
            }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="user.name"
          label="发布者"
          width="180"
        ></el-table-column>
        <el-table-column prop="noticeAccept" label="预计接收" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.noticeAccept">
              {{ scope.row.noticeAccept.estimateNums }}
            </div>
            <div v-else>
              0
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="noticeAccept" label="已接收" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.noticeAccept">
              {{ scope.row.noticeAccept.actualNums }}
            </div>
            <div v-else>
              0
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-全局组件-->
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
    </div>
  </div>
</template>
<script>
import { getSearchList } from '@/api/noticeManagement/message' // 接口
import topSearch from '@component/noticeManagement/message/topSearch' // 上部搜索条件
import listImgString from '@common/listImgString' // 视图预览(返回值为字符串结构)-公共组件
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'messageList',
  msg: '消息清单页面',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    listImgString
  },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [], // 表格数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        // 搜索条件
        sourceType: '', // 发布类型,默认全部
        touchType: '', // 触达渠道,默认全部
        searchContent: '', // 查询
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      multipleSelection: []
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      getSearchList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    selectAble(row, index) {
      if (row && row.id) {
        return true
      } else {
        return false
      }
    },
    // 选择框改变事件
    selectChange(value) {
      this.multipleSelection = value
    }
  }
}
</script>
<style lang="less">
#messageList {
  @import url('~@common/style/imgBox.less');
  .el-table {
    margin-top: 20px;
  }
  .haveReceive {
    color: #1dc8a4;
  }
  .push {
    background-color: #1dc8a4;
  }
  .el-tag {
    border-radius: none !important;
  }
}
</style>
